<template>
  <div class="app-container">
    <el-row>
      <el-col :span="20">
        <a-title @clickPreview="preview" />
      </el-col>
      <el-col :span="4" style="text-align: right;">
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </el-col>
    </el-row>

    <el-form ref="form" label-width="150" :inline="true" :model="form">
      <el-row>
        <el-col class="el-col-title" :span="24">
          <div class="grid-content bg-purple-light">建筑类</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目名称">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.buildingProjectName }}</pre>
              </div>
              <el-input disabled v-model="form.buildingProjectName"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设单位">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.buildingConstrucUnit }}</pre>
              </div>
              <el-input disabled v-model="form.buildingConstrucUnit"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属行业">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.buildingIndustry }}</pre>
              </div>
              <el-input disabled v-model="form.buildingIndustry"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报告完成时间">
            <el-date-picker
              v-model="form.buildingReportTime"
              type="date"
              range-separator="-"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="建筑类型">
            <el-input clearable v-model="form.buildingType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设地点">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.buildingConstrucAddress }}</pre>
              </div>
              <el-input disabled v-model="form.buildingConstrucAddress"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建筑总面积">
            <el-input clearable v-model="form.buildingArea" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总用地面积">
            <el-input clearable v-model="form.buildingUseArea" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="总投资">
            <el-input clearable v-model="form.buildingTotalInvestment" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建安费用">
            <el-input clearable v-model="form.buildingTakeAFee" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工程建设其它费用">
            <el-input clearable v-model="form.buildingOtherFee" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="土地费用">
            <el-input clearable v-model="form.buildingLandFee" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="是否为绿色建筑">
            <el-radio-group v-model="form.isGreenBuilding">
              <el-radio
                v-for="item in whetherOptions"
                :key="item.value"
                :label="item.label"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="是否为装配式建筑">
            <el-radio-group v-model="form.isFabricatedBuilding">
              <el-radio
                v-for="item in whetherOptions"
                :key="item.value"
                :label="item.label"
              >{{item.label}}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="建设类型(新建\改扩建)">
            <el-select disabled v-model="form.buildingConstrucType">
              <el-option label="新建" value="0" />
              <el-option label="改扩建" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:20px;">
        <el-table :data="form.buildingTableData" style="width: 100%">
          <el-table-column label="建筑单体明细表">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="buildingConstrucUnitName" label="建筑单位名称">
              <template slot-scope="scope">
                <el-input clearable v-model="scope.row.buildingConstrucUnitName"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="buildingArea" label="面积(m2)" align="center" width="180">
              <template slot-scope="scope">
                <el-input clearable v-model="scope.row.buildingArea" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="buildingPrice" label="单价(元/m2)" align="center" width="180">
              <template slot-scope="scope">
                <el-input clearable v-model="scope.row.buildingPrice" type="number"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="buildingStructureType" align="center" label="结构类型">
              <template slot-scope="scope">
                <el-input clearable v-model="scope.row.buildingStructureType"></el-input>
              </template>
            </el-table-column>
            <el-table-column width="80" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteListRow(scope.$index, form.buildingTableData)"
                  type="text"
                  size="small"
                >移除</el-button>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div>
          <el-button type="primary" @click="addListRow()">添加一行</el-button>
        </div>
      </el-row>

      <el-row>
        <el-col class="el-col-title" :span="24">
          <div class="grid-content bg-purple-light">市政类</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="项目名称">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.municipalProjectName }}</pre>
              </div>
              <el-input disabled v-model="form.municipalProjectName"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设单位">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.municipalConstrucUnit }}</pre>
              </div>
              <el-input disabled v-model="form.municipalConstrucUnit"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="所属行业">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.municipalIndustry }}</pre>
              </div>
              <el-input disabled v-model="form.municipalIndustry"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="报告完成时间">
            <el-date-picker
              v-model="form.municipalReportTime"
              type="date"
              range-separator="-"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="市政工程类型">
            <el-input clearable v-model="form.municipalProjectType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设地点">
            <el-tooltip placement="top" trigger="hover">
              <div slot="content">
                <pre>{{form.municipalConstrucAddress }}</pre>
              </div>
              <el-input disabled v-model="form.municipalConstrucAddress"></el-input>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建筑总面积">
            <el-input clearable v-model="form.municipalTotalArea" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="总用地面积">
            <el-input clearable v-model="form.municipalUseLandArea" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="总投资">
            <el-input clearable v-model="form.municipalTotalInvest" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建安费用">
            <el-input clearable v-model="form.municipalTakeAFee" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="工程建设其它费用">
            <el-input clearable v-model="form.municipalOtherFee" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="土地费用">
            <el-input clearable v-model="form.municipalLandFee" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="道路工程等级">
            <el-input clearable v-model="form.municipalRoadGrade"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="长度(m)">
            <el-input clearable v-model="form.municipalLength" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度(m)">
            <el-input clearable v-model="form.municipalWidth" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单价(元/m2)">
            <el-input clearable v-model="form.municipalPrice" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="桥梁上部结构类型">
            <el-input clearable v-model="form.municipalBridgeSuperstructure"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="桥梁下部结构类型">
            <el-input clearable v-model="form.municipalBridgeSubstructure"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="宽度(m)">
            <el-input clearable v-model="form.municipalBridgeWidth" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单价(元/m)">
            <el-input clearable v-model="form.municipalBridgePrice" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="6">
          <el-form-item label="排水工程管道类型">
            <el-input clearable v-model="form.municipalDrainLineType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="管径(mm)">
            <el-input clearable v-model="form.municipalPipeDiameter" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="单价(元/m)">
            <el-input clearable v-model="form.municipalPipePrice" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="建设类型(新建\改扩建)">
            <el-select v-model="form.municipalConstrucType" disabled>
              <el-option label="新建" value="0" />
              <el-option label="改扩建" value="1" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  getIndicatorReport,
  addIndicatorReport,
  updateIndicatorReport
} from "@/api/business/indicatorReport";
import { listGeneral } from "@/api/projectWorkbench/projectList/projectGeneral";
import aTitle from "@/components/Title";
export default {
  name: "IndicatorReport",
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      form: {
        buildingProjectName: "",
        buildingConstrucUnit: "",
        buildingIndustry: "",
        buildingReportTime: "",
        buildingType: "",
        buildingConstrucAddress: "",
        buildingArea: "",
        buildingUseArea: "",
        buildingTotalInvestment: "",
        buildingTakeAFee: "",
        buildingOtherFee: "",
        buildingLandFee: "",
        isGreenBuilding: "",
        isFabricatedBuilding: "",
        buildingConstrucType: "",
        municipalProjectName: "",
        municipalConstrucUnit: "",
        municipalIndustry: "",
        municipalReportTime: "",
        municipalProjectType: "",
        municipalConstrucAddress: "",
        municipalTotalArea: "",
        municipalUseLandArea: "",
        municipalTotalInvest: "",
        municipalTakeAFee: "",
        municipalOtherFee: "",
        municipalLandFee: "",
        municipalRoadGrade: "",
        municipalLength: "",
        municipalWidth: "",
        municipalPrice: "",
        municipalBridgeSuperstructure: "",
        municipalBridgeSubstructure: "",
        municipalBridgeWidth: "",
        municipalBridgePrice: "",
        municipalDrainLineType: "",
        municipalPipeDiameter: "",
        municipalPipePrice: "",
        municipalConstrucType: "",
        buildingTableData: [
          {
            buildingConstrucUnitName: "",
            buildingArea: "",
            buildingPrice: "",
            buildingStructureType: ""
          }
        ]
      },
      queryParams: {},
      whetherOptions: [
        {
          label: "是",
          value: "1"
        },
        {
          label: "否",
          value: "0"
        }
      ]
    };
  },
  created () {
    this.getProjectInfo(this.$route.params.projectId);
  },
  mounted(){
    document.title=document.getElementById("businessNameTitle").innerHTML;
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}业务主页/指标填报.xlsx`
      )}&name=${encodeURIComponent("指标填报.xlsx")}`;
    },
    getProjectInfo (projectId) {
      listGeneral(projectId).then(res => {
        if (res.code === 200) {
          //项目名称
          this.form.buildingProjectName = res.data.name;
          this.form.municipalProjectName = res.data.name;
          //建设单位
          this.form.buildingConstrucUnit = res.data.party;
          this.form.municipalConstrucUnit = res.data.party;
          //所属行业
          this.form.buildingIndustry = res.data.industry;
          this.form.municipalIndustry = res.data.industry;
          //建设地点
          this.form.buildingConstrucAddress =
            res.data.areaName.split(";").join("") + res.data.address;
          this.form.municipalConstrucAddress =
            res.data.areaName.split(";").join("") + res.data.address;
          //建设类型
          this.form.buildingConstrucType = res.data.constructionType;
          this.form.municipalConstrucType = res.data.constructionType;

          this.selectIndicatorReport(this.$route.params.id);
        }
      });
    },
    deleteListRow (index, rows) {
      rows.splice(index, 1);
    },
    addListRow () {
      this.form.buildingTableData.push({
        buildingConstrucUnitName: "",
        buildingArea: "",
        buildingPrice: "",
        buildingStructureType: ""
      });
    },
    selectIndicatorReport (businessId) {
      getIndicatorReport({ businessId: businessId }).then(response => {
        if (response.code === 200) {
          if (response.data) {
            this.queryParams = response.data;
            this.form = JSON.parse(response.data.indicatorData);
          }
        } else {
          this.msgError(response.msg);
        }
      });
    },
    onSubmit () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.queryParams.indicatorData = JSON.stringify(this.form);
          if (this.queryParams && this.queryParams.guid) {
            updateIndicatorReport(this.queryParams).then(response => {
              if (response.code === 200) {
                this.msgSuccess("修改成功");
              } else {
                this.msgError(response.msg);
              }
            });
          } else {

            var params = {
              projectId: this.$route.params.projectId,
              businessId: this.$route.params.id,
              businessTypeId: this.$route.params.businessCategoryId,
              indicatorData: JSON.stringify(this.form)
            };

            addIndicatorReport(params).then(response => {
              if (response.code === 200) {
                this.queryParams.guid = response.data.guid;
                this.msgSuccess("新增成功");
              } else {
                this.msgError(response.msg);
              }
            });
          }
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-col-title {
  border-radius: 4px;
  margin-bottom: 10px;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  line-height: 36px;
  padding-left: 8px;
}
</style>